<template>
  <div>
    <a-card :bordered="false" :bodyStyle="{ padding: '24px 0', height: '100%' }">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="搜索学员:">
                <a-input v-model="keywords" placeholder="搜索学员/手机号(回车搜索)" style="width:80%;"
                  @pressEnter="$refs.table.refresh(true)">
                  <a-tooltip slot="suffix" title="搜索学员/手机号">
                    <a-icon type="search" style="color:rgba(0,0,0,.45)" @click="$refs.table.refresh(true)" />
                  </a-tooltip>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="跟进状态:">
                <a-select v-model="queryParam.follow_up_status" placeholder="请选择试听状态" allowClear style="width:80%;">
                  <a-select-option value="1">待跟进</a-select-option>
                  <a-select-option value="2">跟进中</a-select-option>
                  <a-select-option value="3">已约课</a-select-option>
                  <a-select-option value="4">已体验</a-select-option>
                  <a-select-option value="5">已失效</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="跟进人:">
                <a-select v-model="queryParam.user_id" placeholder="请选择跟进人" allowClear style="width:80%;">
                  <a-select-option v-for="(item, index) in userList" :key="index" :value="item.id">{{ item.name
                    }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <template v-if="showSearch">
              <a-col :md="8" :sm="24">
                <a-form-item label="最后跟进时间">
                  <a-range-picker @change="onChange" style="width:80%;" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="下次跟进时间">
                  <a-range-picker @change="onChange1" style="width:80%;" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="学员来源">
                  <a-select placeholder="请选择学员来源" allowClear style="width:80%;" v-model="queryParam.source_id">
                    <a-select-option v-for="(item, index) in sourceSelect" :key="index" :value="item.id">{{ item.name
                      }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="创建时间">
                  <a-range-picker @change="onChange2" style="width:80%;" />
                </a-form-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-item label="标签">
                  <a-select mode="multiple" placeholder="请选择标签" style="width:80%;" @change="onChange3">
                    <a-select-option v-for="(item, index) in tagSelect" :key="index" :value="item.id">{{ item.content
                      }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
            </template>
            <!-- <a-col :md="!advanced && 8 || 24" :sm="24pxfjsisdcldskfgjnefvnkane>dnsdnofiejisncqpofiwcmewiewi>
            sdjfiieksjifvneifjeflsjoifjaknciefjiejyuasdxnjsjadjisdnnjccaidajfj
            asdiidiv<span>nihao<ashih>
              consone.log(nihaoshijei)
              dniasdnjfnjs
            <span
              class="table-page-search-submitButtons"
              :style="advanced && { float: 'right', overflow: 'hidden' } || {} "
            >
              <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              <a-button style="margin-left: 8px" @click="() => queryParam = {}">重置</a-button>
              <a @click="toggleAdvanced" style="margin-left: 8px">
                {{ advanced ? '收起' : '展开' }}
                <a-icon :type="advanced ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>-->
          </a-row>
        </a-form>
      </div>
      <a style="cursor:pointer" v-if="showSearch" @click="more" id="moreButton">
        收起
        <a-icon type="up"></a-icon>
      </a>
      <a style="cursor:pointer" v-if="!showSearch" @click="more" id="moreButton">
        展开
        <a-icon type="down"></a-icon>
      </a>
      <div class="table-operator">
        <a-button type="primary" @click="$refs.followUp.showVisible()">今日待跟进({{ followUpCount.unComplete || '0'
          }})</a-button>
        <a-button style="margin-left:10px;" @click="$refs.creatStudent.showDraw()">添加潜在学员</a-button>
        <a-button :disabled="selectedRowKeys.length == 0" @click="showUser(selectedRows)"
          style="margin-left:10px;">批量分配跟进人</a-button>
        <!-- <a-button
        :disabled="selectedRowKeys.length == 0"
        @click="showManager(selectedRows)"
        style="margin-left:10px;"
      >批量分配学管师</a-button>-->
        <a-button style="margin-left:10px;" :disabled="selectedRowKeys.length == 0" @click="batchDel"
          type="danger">批量删除</a-button>
        <a-button style="margin-left:10px;" @click="updateModal = true">导入潜在学员</a-button>
        <!-- <a-button>导出</a-button> -->
      </div>
      <!-- <a-alert type="warning" message="预警值： 剩余课时≤7课时 或 剩余天数≤10天" banner class="expand_warning" /> -->
      <s-table ref="table" :rowKey="(record) => record.id" :columns="columns" :data="loadData"
        class="user_management_table" style="margin-top:20px;" :scroll="{ x: 2200 }"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :pagination="pagination">
        <span slot="name" slot-scope="text,record">
          <a @click="nowClick(record)">{{ record.name }}</a>
          <a-icon type="man" v-if="record.sex == 1" style="color:#1890ff;margin-left:5px;" />
          <a-icon type="woman" v-if="record.sex == 2" style="color:#eb2f96;margin-left:5px;" />
          <!-- <a-icon type="man" theme="twoTone" v-if="record.sex==1" />
        <a-icon type="woman" theme="twoTone" two-tone-color="#eb2f96" v-if="record.sex==2" />-->
        </span>
        <span slot="age" slot-scope="text,record">{{ record.age || record.birthday }}</span>
        <span slot="follow_up_status" slot-scope="text,record">{{ record.follow_up_status == 1 ? '待跟进' :
          record.follow_up_status == 2 ? '跟进中' : record.follow_up_status == 3 ? '已约课' : record.follow_up_status == 4 ?
            '已体验' :
            record.follow_up_status == 5 ? '已失效' : '' }}</span>
        <span slot="intention_level" slot-scope="text,record">{{ record.intention_level == 1 ? '低' :
          record.intention_level ==
            2 ? '中' : record.intention_level == 3 ? '高' : '' }}</span>
        <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
        <span slot="action" slot-scope="text,record">
          <a @click="followUp(record)">跟进</a>
          <a-divider type="vertical" />
          <a @click="showLessonTable(record)">试听</a>
          <a-divider type="vertical" />
          <a @click="signUp(record)">报名</a>
        </span>
      </s-table>
      <a-modal :visible="creat_visible" title="添加跟进记录" @ok="sure" @cancel="creat_visible = false"
        :confirmLoading="btnLoading" :bodyStyle="{ 'max-height': '400px', 'overflow-y': 'auto' }">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item label="跟进内容" prop="content">
            <a-textarea v-model="form.content" placeholder="请输入跟进内容" :maxLength="1000"
              :auto-size="{ minRows: 3, maxRows: 5 }" />
            <a-upload :before-upload="beforeUploadImg" list-type="picture-card" :file-list="fileList"
              :remove="removePic">
              <!-- @change="handleChange" -->
              <div v-if="fileList.length < 9">
                <a-icon type="plus" />
                <div class="ant-upload-text">上传图片</div>
              </div>
            </a-upload>
            <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
              <img alt="example" style="width: 100%" :src="previewImage" />
            </a-modal>
          </a-form-model-item>
          <a-form-model-item label="下次跟进">
            <a-date-picker v-model="time" show-time format="YYYY-MM-DD HH:mm" placeholder="选择时间" @change="changeTime"
              :disabled-date="disabledDate" />
          </a-form-model-item>
        </a-form-model>
        <div class="lastFollow" v-if="lastInfo">
          <div class="title">上次跟进记录</div>
          <div class="userInfo">
            <span class="user" style="margin-right:15px;">
              <a-icon type="user" style="margin-right:10px;color:#ccc;" />
              <span v-if="lastInfo.user && lastInfo.user.name"></span>
              <span v-else>--</span>
            </span>
            <!-- <span class="time">
            <a-icon type="clock-circle" style="margin-right:10px;color:#ccc;" />
          </span>-->
          </div>
          <div class="followUpContent">
            <span v-if="lastInfo.content">{{ lastInfo.content }}</span>
            <span v-else>--</span>
          </div>
        </div>
      </a-modal>
      <a-modal :visible="updateModal" :confirmLoading="updateLoading" title="导入潜在学员" @ok="handleUpload"
        @cancel="updateModal = false">
        <div class="updateInfo">
          <div class="line">
            <div class="title">1.下载导入模板，按要求填写信息</div>
            <div>
              <p class="warning_p">1.模板中的表头名称不可更改，表头行不能删除</p>
              <p class="warning_p">2.其中姓名、手机号为必填项</p>
              <p class="warning_p">3.手机号相同判断为1个学员</p>
              <p class="warning_p">4.导入文件请不要超过1M</p>
              <a @click="downloadClass">下载学员信息导入模板</a>
            </div>
          </div>
          <div class="line">
            <div class="title">2.选择需要导入的Excel文件</div>
            <div>
              <a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload">
                <a-button type="primary" :disabled="fileList.length > 0">添加文件</a-button>
              </a-upload>
            </div>
          </div>
        </div>
      </a-modal>
      <create-form ref="createModal" @ok="handleOk" />
      <create-student ref="creatStudent" :isQianzai="true" @reload="submitForm"></create-student>
      <listen-lesson-table ref="lessonTable" :student_id="studentID"></listen-lesson-table>
      <user-modal ref="user" @reload="$refs.table.refresh()"></user-modal>
      <user-modal-manager ref="manager" @reload="$refs.table.refresh()"></user-modal-manager>
      <follow-up-table-modal :studentFileExpand="3" ref="followUp"></follow-up-table-modal>
      <grade-model ref="grades" @reload="reloadSelect"></grade-model>
      <sources-model ref="sources" @reload="reloadSelect"></sources-model>
      <tags-model ref="tags" @reload="reloadSelect"></tags-model>
    </a-card>
    <div class="ant-card" style="margin-top: 30px;padding: 30px;">
      <h2>潜在学员</h2>
      <div style="display: flex; justify-content: space-around;">
        <div class="echart">
          <div class="echart" id="lineDemo" ref="chart" style="width: 1200px;height: 500px;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { STable, Ellipsis } from '@/components'
import createStudent from '@/components/studentDrawer/addStudent'
// import StepByStepModal from '../../list/modules/StepByStepModal'
import listenLessonTable from '@/components/lesson'
import CreateForm from '@/views/list/modules/CreateForm'
import {
  studentList,
  studentFollowAdd,
  studentCreate,
  qianzaiStudentExcelIn,
  qianzaiStudentBatchDel,
  studentexport,
} from '@/api/student'
import { uploadPic } from '@/api/login'
import userModal from '@/components/userModel/user'
import userModalManager from '@/components/userModel/manager'
import followUpTableModal from '@/components/followUpTable'
import { followUp, followUpCount } from '@/api/dashboardCount'
import { gradeList } from '@/api/grade'
import { sourceList } from '@/api/sources'
import gradeModel from '@/components/gradeManage'
import sourcesModel from '@/components/studentSource'
import { accountList } from '@/api/account'
import { userList } from '@/api/user'
import { tagList } from '@/api/tag'
import tagsModel from '@/components/tagsManage'

export default {
  name: 'TableList',
  components: {
    STable,
    Ellipsis,
    CreateForm,
    userModal,
    userModalManager,
    listenLessonTable,
    followUpTableModal,
    tagsModel,
    gradeModel,
    sourcesModel,
    createStudent
  },
  data() {
    return {
      option: {
        title: {
          text: 'Potential students'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        legend: {
          data: ['测试课程1', '测试课程2', '测试课程3', '测试课程4', '测试课程5'],
          textStyle: {
            color: '#a1a1a1'
          }
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '测试课程1',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: 'rgba(136, 155, 216)' // 单一颜色
            },
            lineStyle: {
              color: 'rgb(136, 155, 216)' // 线条颜色
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '测试课程2',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: 'rgba(178, 220, 159)' // 单一颜色
            },
            lineStyle: {
              color: 'rgba(178, 220, 159)' // 单一颜色
            },
            emphasis: {
              focus: 'series'
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '测试课程3',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: 'rgba(252, 217, 139)' // 单一颜色
            },
            lineStyle: {
              color: 'rgba(252, 217, 139)' // 单一颜色
            },
            emphasis: {
              focus: 'series'
            },
            data: [150, 232, 201, 154, 190, 330, 410]
          },
          {
            name: '测试课程4',
            type: 'line',
            stack: 'Total',
            areaStyle: {
              color: 'rgba(244,148, 148)' // 单一颜色
            },
            lineStyle: {
              color: 'rgba(244,148, 148)' // 单一颜色
            },
            emphasis: {
              focus: 'series'
            },
            data: [320, 332, 301, 334, 390, 330, 320]
          },
          {
            name: '测试课程5',
            type: 'line',
            stack: 'Total',
            label: {
              show: true,
              position: 'top'
            },
            areaStyle: {
              color: 'rgba(157, 211, 232)' // 单一颜色
            },
            lineStyle: {
              color: 'rgba(157, 211, 232)' // 单一颜色
            },
            emphasis: {
              focus: 'series'
            },
            data: [820, 932, 901, 934, 1290, 1330, 1320]
          }
        ]
      },
      pagination: {
        showTotal: total => `共${total}条数据`,
      },
      // 添加潜在学员
      showDrawer: false,
      confirmLoading: false,
      gradeSelect: [], // 年级下拉
      sourceSelect: [], // 学生来源下拉
      userSelect: [], // 学管师  跟进人下拉
      tagSelect: [],
      mdl: {},
      // 高级搜索 展开/关闭
      advanced: false,
      // 查询参数
      keywords: '',
      queryParam: {
        type: 3,
        label_id: undefined,
        school_id: this.$store.state.user.school
      },
      showSearch: false,
      userList: [],
      queryParams: {
        user_type: 0,
        type: 1,
        school_id: this.$store.state.user.school,
        last_start_time: '',
        last_end_time: '',
        next_start_time: '',
        next_end_time: '',
        created_start_time: '',
        created_end_time: '',
      },
      selectedRowKeys: [],
      selectedRows: [],
      // 表头
      columns: [
        {
          title: '学员姓名',
          dataIndex: 'name',
          width: 200,
          fixed: 'left',
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '手机号',
          dataIndex: 'main_phone',
          width: 200,
          fixed: 'left'
        },
        {
          title: '跟进状态',
          dataIndex: 'follow_up_status',
          align: 'center',
          scopedSlots: { customRender: 'follow_up_status' },
        },
        {
          title: '意向级别',
          dataIndex: 'intention_level',
          align: 'center',
          scopedSlots: {
            customRender: 'intention_level',
          },
        },
        {
          title: '跟进人',
          dataIndex: 'user_name',
          align: 'center',
        },
        {
          title: '最后一次跟进',
          width: 150,
          dataIndex: 'last_follow_up',
          ellipsis: true,
        },
        {
          title: '下次跟进时间',
          width: 150,
          dataIndex: 'next_follow_up',
          ellipsis: true,
        },
        {
          title: '年龄',
          dataIndex: 'age',
          align: 'center',
          // scopedSlots: { customRender: 'age' }
        },
        {
          title: '年级',
          dataIndex: 'grade_name',
        },
        {
          title: '学校',
          dataIndex: 'school_name',
          width: 150,
          ellipsis: true,
        },
        {
          title: '学生来源',
          dataIndex: 'source_name',
          ellipsis: true,
        },
        {
          title: '标签',
          width: 200,
          ellipsis: true,
          dataIndex: 'label_name',
          ellipsis: true,
        },
        {
          title: '创建时间',
          dataIndex: 'created_at',
        },
        {
          title: '操作',
          //   width: '100px',
          dataIndex: 'action',
          fixed: 'right',
          align: 'right',
          ellipsis: true,
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        let postData = {}
        for (let key in this.queryParam) {
          if (this.queryParam[key]) {
            let nature = key
            postData[nature] = this.queryParam[key]
          }
        }
        return studentList(Object.assign(parameter, this.queryParam, { keywords: this.keywords || undefined })).then(
          (res) => {
            return res
          }
        )
      },
      studentID: null,
      creat_visible: false,
      form: {
        content: '',
        time: '',
      },
      rules: {
        content: [{ required: true, message: '请输入跟进内容', trigger: 'blur' }],
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
      previewVisible: false,
      previewImage: '',
      fileList: [],
      visibleType: '',
      time: null,
      imgModal: '',
      showImgModal: false,
      btnLoading: false,

      followUpCount: {
        unComplete: 0,
        complete: 0,
      },
      lastInfo: null,
      //导入
      updateModal: false, //弹窗
      fileList: [],
      updateLoading: false,
    }
  },
  created() {
    followUpCount(this.queryParams).then((res) => {
      this.followUpCount.unComplete = res.unComplete
      this.followUpCount.complete = res.complete
    })
    //跟进统计
    accountList({ pageSize: 999999, school_id: this.$store.state.user.school })
      .then((res) => {
        this.userList = res.data
      })
      .catch((error) => { })
    this.reloadSelect()
  },
  mounted() {
    const chartDom = document.getElementById('lineDemo')
    const myChart = this.$echarts.init(chartDom)
    myChart.clear()
    myChart.setOption(this.option)
  },
  methods: {
    handleButtonClick(e) {
      console.log('click', e)
    },
    handleMenuClick(e) {
      console.log('click', e)
    },
    disabledDate(current) {
      return current && current < moment().startOf('day')
    },
    submitForm() {
      this.$refs.table.refresh()
    },
    choiceAge(d, ymd) {
      this.studentForm.birthday = ymd
    },
    followUp(e) {
      this.studentID = e.id
      this.lastInfo = e.last
      this.creat_visible = true
    },
    showLessonTable(e) {
      this.studentID = e.id
      this.$refs.lessonTable.showVisible()
    },
    removePic(a) {
      this.fileList.forEach((item, index) => {
        if (item.uid == a.uid) {
          this.fileList.splice(index, 1)
        }
      })
    },
    beforeUploadImg(file) {
      const isJpgOrPng =
        file.type === 'image/jpeg' ||
        file.type === 'image/png' ||
        file.type === 'image/svg' ||
        file.type === 'image/jpg' ||
        file.type === 'image/gif'
      if (!isJpgOrPng) {
        this.$message.error('只能上传jpg/png图片格式！')
        return
      }
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!isLt2M) {
        this.$message.error('只能上传10MB以内的图片!')
        return
      }
      const _this = this
      const formData = new FormData()
      formData.append('file', file)
      formData.append('school_id', this.$store.state.user.school)
      this.btnLoading = true
      uploadPic(formData)
        .then((res) => {
          this.fileList.push({
            name: res.path,
            uid: this.fileList.length + 1,
            url: res.url,
          })
          this.btnLoading = false
        })
        .catch((err) => {
          this.btnLoading = false
          this.$message.error(err.data.message || '上传失败，请稍后重试~')
        })
      return false
    },
    nowClick(e) {
      this.$router.push({ name: 'student_Info', query: { id: e.id, isQianzai: 3 } })
    },
    handleEdit(record) { },
    handleSub(record) {
      if (record.status !== 0) {
        this.$message.info(`${record.no} 订阅成功`)
      } else {
        this.$message.error(`${record.no} 订阅失败，规则已关闭`)
      }
    },
    handleOk() {
      this.$refs.table.refresh()
    },

    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date()),
      }
    },
    changeTime(date, dateString) {
      this.form.time = dateString
    },
    sure() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true
          let params = JSON.parse(JSON.stringify(this.form))
          params.student_id = this.studentID
          params.img = []
          if (this.time) {
            params.next_time = this.time.format('YYYY-MM-DD HH:mm')
          }
          this.fileList.forEach((val) => {
            params.img.push(val.url)
          })
          studentFollowAdd(params)
            .then((res) => {
              this.$message.success('添加成功')
              this.$refs.table.refresh()
              this.creat_visible = false
              this.btnLoading = false
            })
            .catch((err) => {
              this.$message.error(err.data.message || '添加失败，请稍后重试')
              this.btnLoading = false
            })
        } else {
          return false
        }
      })
    },
    showUser(data) {
      let arr = []
      data.forEach((val) => {
        arr.push(val.id)
      })
      this.$refs.user.showModal(arr)
    },
    showManager(data) {
      let arr = []
      data.forEach((val) => {
        arr.push(val.id)
      })
      this.$refs.manager.showModal(arr)
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    showChild(e) {
      if (e == 'grades') {
        this.$refs.grades.showModal()
      } else if (e == 'source') {
        this.$refs.sources.showModal()
      } else if (e == 'tags') {
        this.$refs.tags.showModal()
      }
    },
    reloadSelect() {
      gradeList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
        this.gradeSelect = res.data
      })
      sourceList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
        this.sourceSelect = res.data
      })
      accountList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
        this.userSelect = res.data
      })
      tagList({ pageSize: 999999, school_id: this.$store.state.user.school }).then((res) => {
        this.tagSelect = res.data
      })
    },
    //导入
    beforeUpload(file) {
      this.fileList = [file]
      const extension = file.name.split('.')[1] === 'xls'
      const extension2 = file.name.split('.')[1] === 'xlsx'
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!extension && !extension2) {
        this.$message.warning('上传模板只能是 xls、xlsx格式!')
        this.fileList = []
        return false
      }
      if (!isLt5M) {
        this.$message.warning('上传模板大小不能超过 5MB!')
        this.fileList = []
        return false
      }
      return false
    },
    handleRemove(file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
    handleUpload() {
      if (this.fileList.length < 1) {
        this.$message.error('请选择上传文件')
      }
      this.updateLoading = true
      let that = this
      const formData = new FormData()
      formData.append('excel', that.fileList[0])
      formData.append('school_id', this.$store.state.user.school)
      qianzaiStudentExcelIn(formData)
        .then((res) => {
          this.updateLoading = false
          this.updateModal = false
          this.$refs.table.refresh()
          this.$message.success('导入成功')
        })
        .catch((err) => {
          this.updateLoading = false
          this.$message.error(err.data.message || '导入失败')
        })
    },
    //批量删除
    batchDel() {
      let that = this
      this.$confirm({
        title: '你确定要删除这' + that.selectedRowKeys.length + '名学员吗？',
        content: '确认删除后，学员在系统中的所有数据都将被清空，此操作不能被撤销。',
        okText: '删除',
        okType: 'primary',
        cancelText: '取消',
        onOk() {
          qianzaiStudentBatchDel({ student_ids: that.selectedRowKeys })
            .then((res) => {
              that.$refs.table.refresh(true)
              that.$message.success('删除成功')
            })
            .catch((err) => {
              that.$message.error(err.data.message || '删除失败')
            })
        },
        onCancel() {
          console.log('Cancel')
        },
      })
    },
    //报名续费
    signUp(e) {
      this.$router.push({ name: 'apply', query: { id: e.id } })
    },
    onChange(date, dateString) {
      this.queryParam.last_start_time = dateString[0]
      this.queryParam.last_end_time = dateString[1]
      this.$refs.table.refresh()
    },
    onChange1(date, dateString) {
      this.queryParam.next_start_time = dateString[0]
      this.queryParam.next_end_time = dateString[1]
      this.$refs.table.refresh()
    },
    onChange2(date, dateString) {
      this.queryParam.create_start_time = dateString[0]
      this.queryParam.create_end_time = dateString[1]
      this.$refs.table.refresh()
    },
    onChange3(e) {
      if (e.length > 0) {
        this.queryParam.label_id = e
      } else {
        this.queryParam.label_id = undefined
      }
    },
    more() {
      this.showSearch = !this.showSearch
    },
    download(blobUrl, name) {
      const a = document.createElement('a')
      a.style.display = 'none'
      a.download = name
      a.href = blobUrl
      a.click()
      document.body.removeChild(a)
    },
    downloadClass() {
      // window.location.href
      studentexport({ school_id: this.$store.state.user.school })
        .then((res) => {
          if (res) {
            let url = ''
            url = res.url.url + res.url.path
            window.location.href = url
          }
          // let blobUrl = window.URL.createObjectURL(res)
          // this.download(blobUrl, '潜在学员信息导入模板')
        })
        .catch((err) => {
          this.$message.error(err.data.message || '下载导入失败')
        })
    },
  },
  watch: {
    queryParam: {
      handler(newName, oldName) {
        this.$refs.table.refresh(true)
      },
      deep: true, // 开启深度监听，默认是false
    },
    creat_visible(val) {
      if (val == false) {
        this.previewVisible = false
        this.previewImage = ''
        this.fileList = []
        this.visibleType = ''
        this.form = {
          content: '',
          time: '',
        }
        this.btnLoading = false
        this.time = undefined
      }
    },
    showDrawer(val) {
      if (val == false) {
        this.studentForm = {
          main_parent_type: 2,
          spare_parent_type: 3,
          type: 3,
          birthday: null,
          label_ids: [],
        }
      }
    },
    updateModal(val) {
      if (val == false) {
        this.fileList = []
        this.updateLoading = false
      }
    },
  },
}
</script>
<style lang="less" scoped>
.lastFollow {
  padding: 0 16px 16px;
  border-radius: 4px;
  background: #fafafa;

  .title {
    padding: 8px 0;
    border-bottom: 1px dashed #ccc;
  }

  .userInfo {
    padding: 8px 0;
  }
}

.expand_warning {
  margin: 16px 0;
  background-color: #fff0e7;
  border-radius: 4px;
}

.expand_warning {
  margin-top: 16px;
  background-color: #fff0e7;
  border-radius: 4px;
}

.btn_margin {
  margin-right: 10px;
}

.updateInfo {
  .line {
    margin-bottom: 16px;

    .title {
      margin-bottom: 3px;
    }

    div {
      .warning_p {
        font-size: 10px;
        color: #faad14;
        padding: 0 2px;
        margin-bottom: 2px;
      }
    }
  }
}

#moreButton {
  position: absolute;
  top: 34px;
  right: 20px;
}
</style>
